
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 图片</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-图片FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="图片 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link current">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>图片</h1>
    
    <p>图片是FairyGUI中最基础的元素，它的设计是尽量考虑到简洁而且高效的。因此，不提供修改图片源的功能，也不支持点击。如果需要动态更改，或者支持点击，请改用装载器（如果图片已经放置在舞台，那么在右键菜单中选择交换元件，再选择装载器，就可以快捷地把图片修改为装载器了）。</p>
<p>FairyGUI支持的图片格式有：PNG，JPG，TGA，PSD，SVG。</p>
<h2 id="图片属性"><a href="#图片属性" class="headerlink" title="图片属性"></a>图片属性</h2><p>在资源库中，或者舞台上，双击图片，进入图片设置对话框：</p>
<p><img src="../../images/QQ20191211-154820.png" alt></p>
<ul>
<li><p><code>图像大小</code> 图片的尺寸，像素大小。<strong>如果图片是SVG格式，则这里是可以手工输入的。</strong>因为SVG是可以无损缩放的，但一般游戏引擎没有提供直接支持，所以你需要为SVG指定大小，这样SVG就能像位图一样使用。</p>
</li>
<li><p><code>数据大小</code> 图片文件的大小，单位字节。如果出现有 xxx-&gt;xxx的字样，表示该图片被压缩过，前面数字是压缩前大小，后面的数字是压缩后大小。</p>
</li>
<li><p><code>使用九宫格进行缩放</code> 九宫格绘制会遵循下面的规则：</p>
<ul>
<li>保持4个角部分不变形</li>
<li>单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）</li>
<li>双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）</li>
</ul>
<p><img src="../../images/48_183396_534f6b07775ff6b.png" alt><br>（图片来自<a href="http://www.cocoachina.com）" target="_blank" rel="noopener">www.cocoachina.com）</a></p>
<p>如果你想九宫格中被拉伸的部分改用平铺进行填充，可以在下图的界面内勾选”平铺部分宫格”后，再勾选需要平铺的宫格：（这个功能只有Unity等部分平台支持）</p>
<p><img src="../../images/QQ20191211-154920.png" alt></p>
<p><strong>如果平台是egret，九宫格任一边都不要设置到边缘，否则显示异常。</strong></p>
</li>
<li><p><code>使用平铺进行缩放</code> 图片拉伸时使用平铺模式进行填充。除了Flash和Haxe版本，应该尽量避免使用较小面积的图片平铺填充到较大的面积，因为这样会产生大量的网格，甚至可能溢出报错。如果你确实有这个需求，Unity版本提供了一种优化策略，你需要将这个图片设置为单独导出（下面的纹理集设置会说明），然后在Unity编辑器中，将这张纹理的Wrap Mode设置为Repeat。满足这两个条件后，使用这个图片进行平铺填充的性能会大大提高，而且不会出现溢出的异常。</p>
</li>
<li><p><code>允许平滑</code> 它指示图片在拉伸时是否进行平滑处理。如果这个图片是用在制作像素游戏里的角色，你可能需要关闭平滑，其他情况一般都应开启。这个选项不适用于使用纹理集的平台。</p>
</li>
<li><p><code>质量</code> 这个选项适用于Flash和Haxe版本。你可以控制单个图片的压缩率，以便获得最优的质量空间比。改变选项后按“应用”可以立即观察到图片的变化，并在“数据大小”里观察压缩大小的成果。<strong>这个选项不适用于Unity等使用纹理集的平台。</strong></p>
</li>
<li><p><code>纹理集</code> 一个包可以包含一张或多张纹理集，每个图片都可以安排放置到不同的纹理集。</p>
<ul>
<li><code>单独</code> 表示这个图片单独放置到一张纹理集，且纹理集的尺寸是2的幂。</li>
<li><code>单独（NPOT）</code> 表示这张图片按原大小直接输出。</li>
<li><code>单独（4的倍数）</code> 表示这个图片单独放置到一张纹理集，且纹理集的尺寸是4的倍数。</li>
</ul>
</li>
<li><p><code>重复边缘像素</code> 勾选后，在纹理集里会自动将图片最边缘的像素扩充出来，以避免图片在拼接或者平铺时产生缝隙。</p>
</li>
</ul>
<p>功能按钮：</p>
<ul>
<li><p><code>更新</code> 选择一个外部图片覆盖此图片。</p>
</li>
<li><p><code>裁剪边缘空白</code> 将图片周围的全透明像素（Alpha=0）永久剪除。图片可能变小。</p>
</li>
<li><p><code>@2x</code> <code>@3x</code> <code>@4x</code> 如果图片是SVG格式，那么可以通过这几个功能快速为图片生成高清版本。</p>
</li>
</ul>
<h2 id="高清资源选择"><a href="#高清资源选择" class="headerlink" title="高清资源选择"></a>高清资源选择</h2><p>做过APP开发的小伙伴应该对这个机制比较熟悉。例如我们为IPhone8设计的一套界面，分辨率是1334x750，用到一个图片a.png，这套UI到IPhone XS Max显示时，a.png就需要被放大两倍显示，放大的结果通常是比原图模糊。因此我们会准备一个<a href="mailto:a@2x.png" target="_blank" rel="noopener">a@2x.png</a>，用作这种情况显示，使界面显示效果呈现高清的效果。</p>
<p>现在我们把这种机制也内置到了FairyGUI。在发布设置对话框里，我们提供了@2x，@3x，@4x的选项，勾选后，如果存在与资源同名且带@2x、@3x、@4x后缀的资源，则发布时会一并打包。运行时则根据当然界面放大系数自动选用适合的资源。这套机制全自动的，程序员无感知。唯一需要做的就是在编辑器放置好资源。</p>
<p><img src="../../images/QQ20191211-161210.png" alt></p>
<h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性"></a>实例属性</h2><p>在舞台上选中一个图片，右边的检查器出现：</p>
<p><img src="../../images/QQ20191211-161253.png" alt></p>
<ul>
<li><p><code>颜色</code> 修改图片各个颜色通道的值，使图片产生变色的效果。</p>
</li>
<li><p><code>亮度</code> 调整图片的明暗。这个实际是通过修改<code>颜色</code>属性实现的，和设置颜色为灰阶颜色一样的效果。例如设置<code>颜色</code>为0xCCCCCC，和设置亮度为0xCC是相同的效果。</p>
</li>
<li><p><code>翻转</code> 将图片水平翻转或垂直翻转。与设置Scale为-1的传统翻转方法不同，这里的翻转是渲染级别的翻转，不涉及到矩阵变换，不受轴心、坐标等影响，如果需要图片翻转建议使用这里的选项。<em>（注：Egret、Laya、Creator版本未能实现这个特性，现在是通过设置Scale为-1实现的，如果要使用，请不要再使用Scale值，两者会冲突）</em>。</p>
</li>
<li><p><code>填充方法</code> 设置填充方法可以实现图片的一些裁剪效果。</p>
<ul>
<li><code>水平</code>  </li>
</ul>
<p><img src="../../images/gaollg0.gif" alt></p>
<ul>
<li><code>垂直</code></li>
</ul>
<p><img src="../../images/gaollg1.gif" alt></p>
<ul>
<li><code>90度</code></li>
</ul>
<p><img src="../../images/gaollg2.gif" alt></p>
<ul>
<li><code>180度</code></li>
</ul>
<p><img src="../../images/gaollg3.gif" alt></p>
<ul>
<li><code>360度</code></li>
</ul>
<p><img src="../../images/gaollg4.gif" alt></p>
</li>
</ul>
<h2 id="GImage"><a href="#GImage" class="headerlink" title="GImage"></a>GImage</h2><p>图片我们一般不直接使用new来创建，也很少有需要单独创建图片的需求。它一般直接放置在其他组件中作为组成元素。如果确实需要实例化一个图片，可以使用以下方法：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GImage aImage = UIPackage.CreateObject(<span class="string">"包名"</span>,<span class="string">"图片名"</span>).asImage;</span><br></pre></td></tr></table></figure>
<p>图片作为UI的一个基础组成元素，它的设计首先是考虑到简单高效，所以是不提供API修改图片的。如果有动态更改图片的需求，应该改为使用装载器（GLoader）。</p>
<p>如果图片设置了填充模式，可以通过代码修改填充比例，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aImage.fillAmount = <span class="number">0.5</span>; <span class="comment">//0~1</span></span><br></pre></td></tr></table></figure>
<p>在Unity平台中，如果在某些特殊场合需要将Texture2D对象赋予给GImage，可以这样做：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//必须注意GImage不管理外部对象的生命周期，不会主动销毁your_Texture2D</span></span><br><span class="line">aImage.texture = <span class="keyword">new</span> NTexture(your_Texture2D);</span><br></pre></td></tr></table></figure>
<p>再次强调，这种需求仍然是建议尽量使用装载器实现。</p>
<p>在Unity平台中，你可以为GImage设置自定义的材质，或者着色器。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aImage.shader = yourShader; </span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line">aImage.material = yourMaterial;</span><br></pre></td></tr></table></figure>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/image.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
